
<template>
  <div v-if="!loading" class="customer-slot">
    <div class="innerwrap" v-if="custType==='one'">
      <!-- 这个判断为了数据同步，customer有值了才加载该数据 -->
      <template v-if="customer">
      <div class="un-remark-warp">
        <!-- <div class="cust-type">
            <customer-avatar :status="sta" :size="44"></customer-avatar>
        </div> -->
        <div class="cust-main">
          <div class="c_info">
            <div class="name">
              <h3>{{custName}}</h3>
              <slot name="noCustomer"></slot>
            </div>
          </div>
          <div class="contact">
            <div class="source">
              <span class="icon info" v-if = "isUnbunding" @click.stop="deleteCustomerImRelation">
                <el-tooltip class="item" effect="dark" transition="" :content="$t('customer.unlinkCustomer')" placement="bottom">
                  <i class="iconfont icon__i icon-quxiaoguanlian"></i>
                </el-tooltip>
              </span>
              <span class="icon info">
                <show-customer-info
                :custInfo="customer"
                :callScreen="callScreen"
                  ></show-customer-info>
              </span>
              <span class="icon info" v-show="isNotAllowEditCustomerInfo">
                <edit-customer-info
                  :currentBusinessObj = "currentBusinessObj"
                  :custInfo="customer"
                  :callScreen = 'callScreen'
                  @requestUpdateCustInfo="$emit('requestUpdateCustInfo', $event)"
                ></edit-customer-info>
              </span>
            </div>
            <span v-if="showRemoteControl" class="icon info" style="text-align: center" @click="StartRemoteControl">
                <el-tooltip class="item" effect="dark" transition="" :content="$t('remoteControl.remoteControl')" placement="bottom">
                  <i class="iconfont icon-yuanchengkongzhi"></i>
                </el-tooltip>
              </span>
            <span :class="['info', phone.tel && phone.tel.length===0 ? 'disable':'']" v-if="flag !== 'ecommerce'">
              <phone :phone="call" ></phone>
            </span>
            <span :class="['info', phone.tel && phone.tel.length===0 ? 'disable':'']" v-if="!isSMS" style="text-align: center">
              <el-tooltip effect="dark" :content="$t('public.monitorVerTip')" :openDelay="200" transition="fade-leave" placement="bottom" v-if="isMonitorVersion">
                <span class="iconfont icon-duanxin1" style="cursor: not-allowed"></span>
              </el-tooltip>
              <phone :phone="phone" v-else></phone>
            </span>
              <span :class="['info', email.length===0 ? 'disable':'']" v-if="flag !== 'ecommerce'">
              <email :email="email"></email>
            </span>
            <span class="agent">
              <img :src="imgUrl" :alt="custOwner" />
            </span>
            <div class="agent-name" v-if="!isOwnerSelectShow" @click.stop="handlechangeOwnerClick">
               <span class="agent-name__span">{{custOwner}}</span>
               <span class="agent-name_i"><i class="el-icon-arrow-down" v-if="isAllowEditOwner"></i></span>
            </div>
            <customer-owner-select
            class="cust-owner__select"
            :expand="true"
            ref="ownerSelect"
            :widthSize="120"
            v-if="isOwnerSelectShow"
            rangeType="customerSlot"
            :placeholder="$t('public.pleasePick')"
            :categoryId="customer ? customer.categoryId: null"
            :owner="customer ? customer.owner: null"
            @ownerChange="handleOwnerChange"
            @visible-change="handleOwnerVisibleChange">
            </customer-owner-select>
          </div>
        </div>
      </div>
        <div class="status">
          <el-dropdown trigger="click" @command="setStatus" size="small" m7automation="status">
                  <span class="type">
                   <span :class="[callScreen? 'type-dailog': '']">
                     {{custStatus}}
                   </span>
                   <i class="el-icon-arrow-down" v-if="isAllowEditStatus&&status"></i>
                  </span>
            <el-dropdown-menu slot="dropdown" v-if="isAllowEditStatus&&status" m7automation="status_list">
              <el-dropdown-item :command="index" v-for="(sta, index) in status">{{sta}}</el-dropdown-item>
            </el-dropdown-menu>
            <el-dropdown-menu slot="dropdown" v-else>
            </el-dropdown-menu>
          </el-dropdown>
          <el-dropdown trigger="click" @command="setSource" size="small" m7automation="source">
                  <span class="type">
                    <span :class="[callScreen? 'type-dailog': '']">
                     {{custSource}}
                   </span>
                     <i class="el-icon-arrow-down" v-if="isAllowEditSource&&source.length>0"></i>
                  </span>
            <el-dropdown-menu slot="dropdown" v-if="isAllowEditSource&&source.length>0" m7automation="source_list">
              <el-dropdown-item :command="sou.key"  v-for="(sou, index) in source"> {{sou.name}}</el-dropdown-item>
            </el-dropdown-menu>
            <el-dropdown-menu slot="dropdown" v-else>
            </el-dropdown-menu>
          </el-dropdown>
          <span>{{showCustField}}</span>
        </div>
        <el-tooltip effect="light" popper-class="custslot-tooltip"  :visible-arrow="false" :content="title || $t('public.noResult')" placement="bottom">
           <div class="remark newremark">{{title || $t('public.noResult')}}</div>
        </el-tooltip>
      </template>
    </div>
    <div v-else-if="custType==='business-del'||custType==='no-customer-bus'">
    <div class="innerwrap-new" v-if="!loading">
      <!-- <div class="cust-type">
        <customer-avatar :status="'status_unknow'" :size="36"></customer-avatar>
      </div> -->
      <div class="c_info c_bus">
        <div class="name business-del-name">
          <h3>
            {{custType==='business-del' ? $t('customer.customerSlot.deleteBusiness'): $t('customer.customerSlot.unlocation')}}
            <span v-if="!customer">
              <slot name="noCustomer"></slot>
            </span>
          </h3>
        </div>
      </div>
    </div>
  </div>
    <template v-else>
      <div :class="['innerwrap-new', autoCustLength >= 0 &&currentBusinessObj.type==='webchat'?'innerwrap-new__webchat':'']">
        <!-- <div class="cust-type">
          <customer-avatar :status="'status_unknow'" :size="36"></customer-avatar>
        </div> -->
        <div :class="['c-webchat__wapper', currentBusinessObj.type!=='webchat'?'c-info__wapper':'']">
          <div class="c_info c_bus">
            <div :class="['name']">
              <h3>{{$t('customer.customerSlot.unlocation')}}</h3>
            </div>
            <div class="status customer-dialog">
              <div v-if="currentBusinessObj.type==='call'&& autoCustLength<=0">
                <el-tooltip :content="$t('customer.customerSlot.addCustomer')" placement="bottom">
                  <a class="text"  @click.stop="isDealog('addCustomerInfo')">
                    <i class="el-icon-plus"></i>
                  </a>
                </el-tooltip>
                <el-tooltip :content="$t('customer.customerSlot.choseCustomer')" placement="bottom">
                  <a class="text selec" @click.stop="isDealog('megerCustomerInfo')">
                    <i class="iconfont icon-dakailianjie"></i>
                  </a>
                </el-tooltip>
                <el-tooltip effect="dark" :content="$t('remoteControl.remoteControl')" placement="bottom">
                  <a v-if="showRemoteControl" class="text selec" @click.stop="StartRemoteControl">
                   <i class="iconfont icon-yuanchengkongzhi"></i>
                  </a>
                </el-tooltip>
              </div>
              <div v-if="currentBusinessObj.type !=='call'">
                <el-tooltip :content="$t('customer.customerSlot.addCustomer')" placement="bottom">
                  <a class="text"  @click.stop="isDealog('addCustomerInfo')">
                    <i class="el-icon-plus"></i>
                  </a>
                </el-tooltip>
                <el-tooltip :content="$t('customer.customerSlot.choseCustomer')" placement="bottom">
                  <a class="text selec" @click.stop="isDealog('megerCustomerInfo')">
                    <i class="iconfont icon-dakailianjie"></i>
                  </a>
                </el-tooltip>
              </div>
              <el-dialog :close-on-click-modal="false" modal-append-to-body lock-scroll top="10%" :title="customerInfo.title"  :visible.sync="customerInfo.isdealog" v-if="customerInfo.isdealog" width="75%">
                 <add-customer
                   :isTag="false"
                   :isBlight = "false"
                   :labelValue = "customerInfo.labelValue"
                   :labelTitle = "customerInfo.title"
                   :reSize = "true"
                   :isDalog = "customerInfo.isdealog"
                   :isDailog = "true"
                   :currentBusinessObj="currentBusinessObj"
                   :custInfo="customer"
                   :isTitle="isTitle"
                   :select="select"
                   :bindCustomer="bindCustomer"
                   @addCustomer="addCustomer"
                   @merge="mergeCustomer"
                   @changeCustomeLabelValue="changeCustomeLabelValue"
                   @closeDialog="closeDialog"
                   ></add-customer>
               </el-dialog>
            </div>
          </div>
          <el-form  v-if="currentBusinessObj.type === 'webchat'" :inline="true" ref="form" label-position="left"  class="webchat_customer">
            <el-form-item prop="date1" >
              <el-input size="mini" v-model.trim="autoCustName" :placeholder="$t('customer.customerSlot.autoCustNamePlaceholder')" >
              <template slot="prepend">{{$t('customer.customerSlot.name')}}</template></el-input>
            </el-form-item>
            <el-form-item prop="date2">
              <el-input size="mini" v-model.trim="autoCustPhone" :placeholder="$t('customer.customerSlot.autoCustPhonePlaceholder')" >
              <template slot="prepend">{{$t('customer.customerSlot.phone')}}</template></el-input>
            </el-form-item>
            <el-form-item prop="date2" class="webchat_customer__lastform">
              <el-input size="mini"  v-model.trim="autoCustPerson" :placeholder="$t('customer.customerSlot.autoCustPersonPlaceholder')">
              <template slot="prepend">{{$t('customer.customerSlot.contact')}}</template></el-input>
            </el-form-item>
            <span class="search_span">
              <i class="iconfont icon-sousuo" @click.stop="isDealog('bindExistCustomers')"></i>
            </span>
          </el-form>
          <div v-if="autoCustLength > 0 && currentBusinessObj.type === 'call'" class="exist_custom phone-wrap">{{$t('customer.customerSlot.tel')}}<span class="phone-num">{{checkHideNum(callPhoneNum)}}</span>{{$t('customer.customerSlot.locationClick')}}<a class="" @click.stop="isDealog('bindExistCustomers2')">{{$t('customer.customerSlot.choseCustomerByOne')}}</a></div>
          <div v-if="autoCustLength === 0 && currentBusinessObj.type === 'webchat'" class="exist_custom" :class="{'exist_custom_webchat': currentBusinessObj.type === 'webchat'}">{{$t('customer.customerSlot.defaultBind')}}</div>
          <div v-if="autoCustLength > 0 && currentBusinessObj.type !== 'call'" class="exist_custom" :class="{'exist_custom_webchat': currentBusinessObj.type === 'webchat'}"><span>{{$t('customer.customerSlot.changeBind1')}}</span><span>{{autoCustLength}}</span><span>{{$t('customer.customerSlot.changeBind2')}}<a class="" @click.stop="isDealog('bindExistCustomers2')">{{$t('customer.customerSlot.changeBind3')}}</a></span></div>
        </div>
      </div>
    </template>
  </div>
</template>
<script>
  import bus from '@/store/eventBus'
  import Phone from './Phone'
  import Email from './Email'
  import EditCustomerInfo from './EditCustomerInfo'
  import ShowCustomerInfo from './ShowCustomerInfo'
  import addCustomer from '@/components/business-modules/customer/AddCustomer.vue'
  // import CustomerAvatar from '@/components/ui-modules/customer-avatar/CustomerAvatar'
  import CustomerOwnerSelect from '@/components/business-modules/customer/CustomerOwnerSelect.vue'
  import * as webchatTypes from '@/store/modules/webchat/mutation-types.js'
  import { showFieldDesc, getCityValue, isNotAllowEditCustomerInfo, isNotAllowEditStatus, isNotAllowEditSource, isNotAllowEditOwner, isAllowPopupEditNoOwnerCustomer } from '@/utils/customerUtils.js'
  import { isHasFunc, getCache, checkHideTel, utilExtend } from '@/utils/m7Utils.js'
  import { isEmpty } from 'lodash'
  export default {
    name: 'CustomerSlot',
    data () {
      return {
        flag: this.$store.getters.isEcommerce ? 'ecommerce' : 'kf',
        isMonitorVersion: false,
        oldDic: [],
        customerInfo: {
          isdealog: false,
          labelValue: 3,
          title: ''
        },
        isMerge: true,
        isAdd: true,
        customerClickType: 'addCus',
        value: '',
        loading: true,
        status: null,
        source: [],
        agents: [],
        custCategorys: [],
        type1: 'call',
        type2: 'talk',
        isSMS: true,
        isOwnerSelectShow: false,
        imgUrl: require('./img/agent.png'),
        isTitle: true,
        showFields: '',
        bindCustomer: {  // 绑定已存在客户的数据
          searchShow: true,
          custObj: {},
          form: {}
        },
        // replayData 定位到的客户信息
        autoCustPerson: '',
        callPhoneNum: '',
        showRemoteControl: false
      }
    },
    props: {
      select: String,
      customer: {
        default: function () {
          return {}
        },
        type: Object
      },
      custType: String,
      // 判断在线咨询和邮件解绑客户组件的显示
      isUnbunding: {
        type: Boolean,
        default: false
      },
      currentBusinessObj: Object,
      callScreen: Boolean,
      webchatData: Object
    },
    computed: {
      isShareScreening () {
        return !!this.$store.state.webchat.isShareScreening
      },
      isRemarkTooltip () {
        let height = this.$el.querySelector('.customer-slot .remark span').offsetHeight
        return height > 15
      },
      isAllowPopupEdit () {
        return isAllowPopupEditNoOwnerCustomer(this.$store.state.session.user)
      },
      isNotAllowEditCustomerInfo () {
        // 当有这个权限时，如果客户的归属不等于当前座席的则不让修改,测计费跳的情况
        let user = this.$store.state.session.user
        if (isHasFunc('func_not_allow_edit_owner_is_others_customer', user)) {
          if (user.type === 'admin' && user.exten === '0000') {
            return true
          } else if (this.customer.owner !== user._id) {
            return false
          }
        }
        if (this.customer.owner === 'NA') {
          return true
        }
        return !isNotAllowEditCustomerInfo(this.$store.state.session.user, this.customer.owner)
      },
      isAllowEditStatus () {
        return this.isNotAllowEditCustomerInfo && !isNotAllowEditStatus(this.$store.state.session.user)
      },
      isAllowEditSource () {
        return this.isNotAllowEditCustomerInfo && !isNotAllowEditSource(this.$store.state.session.user)
      },
      isAllowEditOwner () {
        let user = this.$store.state.session.user
        let scope = user.scope.customer
        // 禁止修改归属
        if (isNotAllowEditOwner(user)) {
          return false
        }
        // 无归属的客户，有'所有人'数据权限或弹屏时有'弹屏可修改无归属的客户'权限的才能修改
        if (this.customer.categoryId === 'NA' && this.customer.owner === 'NA') {
          if (scope === 'all' || this.isAllowPopupEdit) {
            return true
          }
          return false
        }

        // 有归属的客户，数据权限为all或者所属人是我或我的下属或为公海管理员能修改
        let category = getCache('custCategorys', this.customer.categoryId)
        if (user.moduleUsers.customer === 'all' || (user.moduleUsers.customer && user.moduleUsers.customer.indexOf(this.customer.owner) !== -1) || (category && category.managers && category.managers.indexOf(user._id) !== -1)) {
          return true
        }

        return false
      },
      isAllowChoseNoOwner () {
        return this.$store.state.session.user.scope.customer === 'all'
      },
      custSource () {
        if (this.customer) {
          for (let i = 0; i < this.source.length; i++) {
            if (this.source[i].key === this.customer.custsource1) {
              return this.source[i].name
            }
          }
          return this.$t('customer.noSource')
        }
        return this.$t('customer.customerSlot.custSource')
      },
      custName () {
        if (this.custType === 'one') {
          return this.customer ? this.customer.name : this.$t('customer.customerSlot.customerName')
        } else {
          return this.$t('customer.customerSlot.unlocation')
        }
      },
      showCustField () {
        let _str = ''
        let district = ''
        let city = ''
        let _fields = this.customer.fields ? this.customer.fields.map(field => {
          if (field.t === 'dropdown' || field.t === 'radio' || field.t === 'checkbox') {
            field.desc = showFieldDesc('field', field.t, field.k, field.v)
          } else if (field.k === 'taskId' || field.k === 'taskCalled' || field.k === 'sex' || field.k === 'province') {
            field.desc = showFieldDesc(field.k, field.v)
          } else if (field.k === 'city') {
            // 获取市区 县的值 如果有老数据 则比对出相对应的新数据
            let ctiyOrDistrict = getCityValue(this.oldDic, field.v)
            if (!ctiyOrDistrict) {
              city = field.v
            } else {
              city = ctiyOrDistrict.city
              district = ctiyOrDistrict.district || ''
            }
            field.desc = showFieldDesc('city', city, this.customer.province)
          } else if (field.k === 'district') {
            district = district || field.v
            field.desc = showFieldDesc('district', district, city, this.customer.province)
          } else {
            field.desc = showFieldDesc('html', field.v)
          }
          return field
        }) : []
        if (this.customer) {
          if (this.showFields === 'phone' || this.showFields === 'weixin' || this.showFields === 'email') {
            if (this.customer[this.showFields + 'Alias']) {
              _str += this.customer[this.showFields + 'Alias'] + '：'
              if (this.customer[this.showFields] && this.customer[this.showFields].length !== 0) {
                for (let i = 0; i < this.customer[this.showFields].length; i++) {
                  let _phon = ' '
                  if (this.showFields === 'phone') {
                    _phon += this.hideTel(this.customer[this.showFields][i].tel)
                    this.customer.phone[i].memo && (_phon += '(' + this.customer.phone[i].memo + ')')
                    this.customer.phone[i].area && (_phon += '(' + this.customer.phone[i].area + ')')
                  } else if (this.showFields === 'weixin') {
                    _phon += this.customer[this.showFields][i].num
                    this.customer[this.showFields][i].memo && (_phon += '(' + this.customer[this.showFields][i].memo + ')')
                  } else if (this.showFields === 'email') {
                    _phon += this.customer[this.showFields][i].email
                    this.customer[this.showFields][i].memo && (_phon += '(' + this.customer[this.showFields][i].memo + ')')
                  }
                  _str = _str + _phon
                }
              }
              return _str
            }
          } else if (this.showFields === 'provinceCD') {
            let _pron = ''
            let _city = ''
            let _disc = ''
            let that = this
            for (let j = 0; j < _fields.length; j++) {
              if (_fields[j].k === 'province' && that.customer.province !== '') {
                _pron = _fields[j].desc
              }
              if (_fields[j].k === 'city' && that.customer.city !== '') {
                _city = _fields[j].desc
              }
              if (_fields[j].k === 'district' && that.customer.district !== '') {
                _disc = _fields[j].desc
              }
            }
            return this.$t('public.provinceCity') + '：' + _pron + _city + _disc
          } else {
            if (this.customer.fields) {
              for (let k = 0; k < this.customer.fields.length; k++) {
                if (this.showFields === this.customer.fields[k].k) {
                  if (this.customer.fields[k].n) {
                    return this.customer.fields[k].n + '：' + this.customer.fields[k].desc
                  }
                }
              }
            }
          }
        }
        return ''
      },
      custStatus () {
        let cs = this.customer && this.status ? this.status[this.customer.status] : this.$t('customer.customerSlot.customerStatus')
        if (this.status[this.customer.status]) {
          return cs
        } else {
          return this.$t('customer.deleteStatus')
        }
      },
      sta () {
        return this.customer && this.customer.status
      },
      custOwner () {
        if (this.customer) {
          var agents = this.agents
          var owner = this.customer.owner
          this.imgUrl = require('./img/agent.png')

          for (let i = 0; i < agents.length; i++) {
            if (agents[i]._id === owner) {
              this.imgUrl = agents[i].im_icon
                ? agents[i].im_icon + '?imageView2/1/w/96/h/96'
                : require('./img/agent.png')
              return agents[i].displayName
            }
          }

          var custCategorys = this.custCategorys
          var categoryId = this.customer.categoryId
          for (let i = 0; i < custCategorys.length; i++) {
            if (custCategorys[i]._id === categoryId) {
              return custCategorys[i].cName
            }
          }
        }
        return this.$t('customer.noOwner')
      },
      phone () {
        if (this.customer) {
          let phone = {
            tel: this.customer.phone || [],
            type: 'tlak'
          }
          return phone
        } else {
          return {
            tel: [],
            type: 'tlak'
          }
        }
      },
      call () {
        if (this.customer) {
          let call = {
            tel: this.customer.phone || [],
            type: 'call'
          }
          return call
        } else {
          return {
            tel: [],
            type: 'call'
          }
        }
      },
      email () {
        return this.customer && this.customer.email ? this.customer.email : []
      },
      title () {
        return this.customer ? this.customer.title : ''
      },
      autoCustPhone: {
        get () {
          if (this.currentBusinessObj.type === 'webchat' && this.$store.state.webchat.autoCust[this.currentBusinessObj.callId]) {
            return this.$store.state.webchat.autoCust[this.currentBusinessObj.callId].autoCustPhone || ''
          }
        },
        set (value) {
          if (this.currentBusinessObj.type === 'webchat' && this.$store.state.webchat.autoCust[this.currentBusinessObj.callId]) {
            return this.$store.commit(webchatTypes.SET_AUTOCUSTPHONE_VAL, {sessionId: this.currentBusinessObj.callId, data: value})
          }
        }
      },
      autoCustName: {
        get () {
          if (this.currentBusinessObj.type === 'webchat' && this.$store.state.webchat.autoCust[this.currentBusinessObj.callId]) {
            return this.$store.state.webchat.autoCust[this.currentBusinessObj.callId].autoCustName || ''
          }
        },
        set (value) {
          if (this.currentBusinessObj.type === 'webchat' && this.$store.state.webchat.autoCust[this.currentBusinessObj.callId]) {
            return this.$store.commit(webchatTypes.SET_AUTOCUSTNAME_VAL, {sessionId: this.currentBusinessObj.callId, data: value})
          }
        }
      },
      autoCustLength () {
        let type = this.currentBusinessObj.type
        if (type === 'webchat' && this.$store.state.webchat.autoCust[this.currentBusinessObj.callId]) {
          return this.$store.state.webchat.autoCust[this.currentBusinessObj.callId].autoCustLength || 0
        } else if (type === 'email') {
          if (this.$store.state.email.autoCust && this.$store.state.email.autoCust.autoCustLength) {
            return this.$store.state.email.autoCust.autoCustLength
          } else {
            return 0
          }
        } else if (type === 'call') {
          let callArr = this.$route.path.split('/')
          let callSheetId = callArr[4]
          let callType = callArr[3]
          let currentObj = this.$store.state.call.current[callType]
          let phoneNum = ''
          if (currentObj) {
            let callInfo = currentObj.callInfo
            if (callInfo) {
              phoneNum = callInfo.QUICK_QUERY_NUM || callInfo.CALLED_NO
            }
          }
          this.callPhoneNum = phoneNum
          if (this.$store.state.call.autoCust && this.$store.state.call.autoCust[callSheetId] && this.$store.state.call.autoCust[callSheetId].autoCustLength) {
            return this.$store.state.call.autoCust[callSheetId].autoCustLength
          } else {
            return 0
          }
        }
      },
      autoCustObj () {
        let type = this.currentBusinessObj.type
        if (type === 'webchat' && this.$store.state.webchat.autoCust[this.currentBusinessObj.callId]) {
          return this.$store.state.webchat.autoCust[this.currentBusinessObj.callId].autoCustObj
        } else if (type === 'email') {
          return this.$store.state.email.autoCust.autoCustObj
        } else if (type === 'call') {
          let callSheetId = this.$route.path.split('/')[4]
          if (this.$store.state.call.autoCust && this.$store.state.call.autoCust[callSheetId] && this.$store.state.call.autoCust[callSheetId].autoCustObj) {
            return this.$store.state.call.autoCust[callSheetId].autoCustObj
          } else {
            return {}
          }
        }
      }
    },
    components: {
      Phone,
      Email,
      EditCustomerInfo,
      // CustomerAvatar,
      addCustomer,
      ShowCustomerInfo,
      CustomerOwnerSelect
    },
    methods: {
      hideTel (tel) {
        return checkHideTel(tel, this.$store.state.session.user)
      },
      StartRemoteControl () {
        let data = {
          isRemoteControl: true,
          remoteFrom: '',
          remoteCustSid: this.customer._id
        }
        data.remoteFrom = this.currentBusinessObj.type === 'call' ? 'call' : 'customer'
        if (this.currentBusinessObj.type === 'call') {
          data.remoteCustSid = this.customer._id ? this.customer._id : this.callPhoneNum
          data.customerSource = this.customer._id ? 'customer' : 'call'
        }
        this.$store.commit('updateRemoteControlInfo', data)
      },
      deleteCustomerImRelation () {
        this.$emit('unbundling')
        this.customerInfo.isdealog = false
      },
      addCustomer (form) {
        // if (form === 'call') { // 解决通话新增客户之后，窗体无法消失的问题 liyl
        //   this.customerInfo.isdealog = false
        //   return
        // }
        this.customerInfo.isdealog = true
        if (this.currentBusinessObj.type === 'call') {
          if (this.currentBusinessObj.tabType !== 'cdr_call') {
            let callObj = this.$store.state.call.current[this.currentBusinessObj.tabType]
            if (callObj) {
              let callInfo = callObj.callInfo
              if (callInfo && callInfo.CONNECT_TYPE) {
                if (callInfo.CONNECT_TYPE === 'normal' || callInfo.CONNECT_TYPE === 'transfer') {
                  form.callTel = callInfo.CALL_NO
                } else {
                  form.callTel = callInfo.CALLED_NO
                }
              }
            }
            form.dealSrc = 'relocationCall'
            form.actionType = 'self'
            if (this.currentBusinessObj.tabType === 'cdr_outbound') {
              form.dealSrc = 'dialPopup'
            }
          }
          this.$store.dispatch('callLocationCustomer2Add', form).then((res) => {
            if (res && res.code === '1002' || res && res.code === '1001') {
              return false
            } else {
              this.customerInfo.isdealog = false
              if (this.currentBusinessObj.tabType === 'cdr_outbound') {
                this.$store.commit('call/TEMP_CUSTOMER_DATA', {callId: form.callId, customer: res.data})
              }
              this.$emit('addCustomer', res.data)
            }
          })
        } else {
          if (this.currentBusinessObj.type === 'webchat' && this.webchatData) {
            form.chatSessionInfo = {
              'seoSource': this.webchatData.seoSource || '',
              'seoKeywords': this.webchatData.seoKeywords || '',
              'ip': this.webchatData.ip || '',
              'fromUrl': this.webchatData.fromUrl || '',
              'urlTitle': this.webchatData.urlTitle || '',
              'area': this.webchatData.area || ''
            }
          }
          this.$store.dispatch('addCustomer', form).then((val) => {
            if (val.success) {
              form.customerInfo = val.data
              this.$emit('addCustomer', form)
              this.customerInfo.isdealog = false
            }
          })
        }
      },
      mergeCustomer (val) {
        this.$emit('merged', val)
        if (this.customer) {
          this.customerInfo.isdealog = false
        }
      },
      checkHideNum (num) {
        return checkHideTel(num, this.$store.state.session.user)
      },
      isDealog (flag) {
        this.customerInfo.isdealog = true
        if (flag === 'addCustomerInfo') {
          this.customerInfo.title = this.$t('customer.customerSlot.addCustomer')
          this.customerInfo.labelValue = 3
          this.isTitle = true
          this.bindCustomer.searchShow = true
          let arr = this.$route.path.split('/')
          let type = arr[2]
          if (type === 'webchat') {
            this.$emit('autoPerson', this.autoCustPerson)
            this.bindCustomer.custObj = {}
            this.bindCustomer.form = {}
          }
        } else if (flag === 'bindExistCustomers') {
          this.customerInfo.title = this.$t('customer.customerSlot.changeBind3')
          this.customerInfo.labelValue = 6
          this.isTitle = false
          this.bindCustomer.searchShow = false
          if (this.autoCustPhone && !this.autoCustName) {
            this.bindCustomer.form = {'phone': this.autoCustPhone, 'page': 1, 'limit': 10}
          }
          if (this.autoCustName && !this.autoCustPhone) {
            this.bindCustomer.form = {'displayName': this.autoCustName, 'page': 1, 'limit': 10}
          }
          if (this.autoCustPhone && this.autoCustName) {
            this.bindCustomer.form = {'displayName': this.autoCustName, 'phone': this.autoCustPhone, 'page': 1, 'limit': 10, isBind: true}
          }
          this.bindCustomer.form.type = 'webchat'
          if (this.$route.path.split('/')[2] === 'webchat') {
            this.bindCustomer.form.importSid = this.$store.state.webchat.autoCust[this.$route.path.split('/')[4]].importSid || ''
            if (!this.autoCustPhone && !this.autoCustName && !this.bindCustomer.form.importSid) {
              this.customerInfo.isdealog = false
              let info = {
                autoCustName: this.$store.state.webchat.autoCust[this.$route.path.split('/')[4]].autoCustName || this.autoCustName,
                autoCustPhone: this.$store.state.webchat.autoCust[this.$route.path.split('/')[4]].autoCustPhone || this.autoCustPhone,
                autoMatchContent: this.$store.state.webchat.autoCust[this.$route.path.split('/')[4]].autoMatchContent,
                autoMatchType: this.$store.state.webchat.autoCust[this.$route.path.split('/')[4]].autoMatchType,
                autoCustObj: {},
                autoCustLength: 0,
                importSid: this.$store.state.webchat.autoCust[this.$route.path.split('/')[4]].importSid
              }
              this.$store.commit(webchatTypes.AUTO_CUST_INFO, {sessionId: this.$route.path.split('/')[4], data: info})
            }
          }
          if (this.callScreen) {
            this.bindCustomer.form = {'field': 'phone', 'combox': this.newPhoneNum, 'page': 1, 'limit': 10}
          }
        } else if (flag === 'bindExistCustomers2') {
          this.customerInfo.title = this.$t('customer.customerSlot.changeBind3')
          this.customerInfo.labelValue = 6
          this.isTitle = false
          if (this.$route.path.split('/')[2] === 'call') {
            this.bindCustomer.searchShow = true
            this.bindCustomer.form = {'field': 'phone', 'combox': this.callPhoneNum, 'custType': 'call', 'page': 1, 'limit': 10}
          } else {
            this.bindCustomer.searchShow = false
          }
          // this.bindCustomer.form.importSid = this.$store.state.webchat.autoCust[this.$route.path.split('/')[4]].importSid || ''
          if (this.$route.path.split('/')[2] === 'webchat') {
            this.bindCustomer.form.importSid = this.$store.state.webchat.autoCust[this.$route.path.split('/')[4]].importSid || ''
            if (!this.autoCustPhone && !this.autoCustName && !this.bindCustomer.form.importSid) {
              this.customerInfo.isdealog = false
              let info = {
                autoCustName: this.$store.state.webchat.autoCust[this.$route.path.split('/')[4]].autoCustName || this.autoCustName,
                autoCustPhone: this.$store.state.webchat.autoCust[this.$route.path.split('/')[4]].autoCustPhone || this.autoCustPhone,
                autoCustObj: {},
                autoCustLength: 0,
                importSid: this.$store.state.webchat.autoCust[this.$route.path.split('/')[4]].importSid
              }
              this.$store.commit(webchatTypes.AUTO_CUST_INFO, {sessionId: this.$route.path.split('/')[4], data: info})
            }
          }
          this.bindCustomer.custObj = this.autoCustObj
        } else if (flag === 'megerCustomerInfo') {
          this.customerInfo.title = this.$t('customer.customerSlot.choseCustomer')
          this.customerInfo.labelValue = 6
          this.isTitle = true
          this.bindCustomer.form = null
          this.bindCustomer.custObj = null
          this.bindCustomer.searchShow = true
        }
      },
      changeCustomeLabelValue (label) {
        this.customerInfo.labelValue = label.labelValue
        this.customerInfo.title = label.title
      },
      // TODO 座席权限控制和公海
      fetchData () {
        this.loading = true
        let p1 = this.$store.dispatch('getCache', { type: 'custTmpls' })
        let p2 = this.$store.dispatch('getCache', { type: 'agents' })
        let p3 = this.$store.dispatch('getCache', { type: 'custCategorys' })
        let p4 = this.$store.dispatch('getCache', { type: 'options', id: 'd7b9c68a-b50f-21d1-d5fd-41ea93f5f49c' })
        let p5 = this.$store.dispatch('getCache', { type: 'getOldDic' })
        Promise.all([p1, p2, p3, p4]).then(([custTmpls, agents, custCategorys, oldDic]) => {
          let custTmpl = custTmpls[0] || []
          this.oldDic = oldDic || []
          this.showFields = custTmpl.displayFields || ''
          let statusConfig = custTmpl.statusConfig || {}
          let status = JSON.parse(JSON.stringify(custTmpl.status))
          // this.stutasSelect = JSON.parse(JSON.stringify(custTmpl.status))
          if (statusConfig) {
            for (let key in status) {
              if (statusConfig[key] && statusConfig[key].status !== 'enabled') {
                delete status[key]
              }
            }
          }
          this.status = !isEmpty(status) ? status : null
          this.source = custTmpls[0].source || []
          this.agents = agents || []
          this.custCategorys = custCategorys
          this.loading = false
        })
      },
      setStatus (command) {
        let data = {
          _id: this.customer._id,
          status: command
        }
        this.$store.dispatch('updateCustomerStatus', data).then(() => {
          this.loading = false
          bus.$emit('changeCusStatus')
        })
      },
      setSource (command) {
        let data = {
          _id: this.customer._id,
          custsource1: command
        }
        this.$store.dispatch('updateCustomerSource', data).then(() => {
          this.loading = false
          bus.$emit('changeCusSource')
        })
      },
      handlechangeOwnerClick () {
        // 是否有修改权限
        if (this.isAllowEditOwner) {
          this.$emit('requestUpdateCustInfo', () => {
            this.isOwnerSelectShow = true
          })
          // 有则显示修改归属select组件
          // 并且注册一个回调方法
          // let fun = (event) => {
            // 监听触发 如果触发的事件的Domid不是 ownerSelect
            // 则不显示select组件
            // 并且注销监听click事件方法
           // document.body.removeEventListener('click', fun)
          // }
          // 监听body里面的方法 发生点击则执行Fun回调方法
          // document.body.addEventListener('click', fun)
        }
      },
      handleOwnerChange (obj) {
        this.isOwnerSelectShow = false
        let data = {
          _id: this.customer._id
        }
//        Object.assign(data, obj)
        utilExtend(data, obj)
        this.$store.dispatch('updateCustomerOwner', data).then(() => {})
      },
      handleOwnerVisibleChange (visible) {
        // visible select下拉的隐藏时展示归属名
        if (!visible) {
          // 其实这里只要把select组件不显示就行了
          this.isOwnerSelectShow = false
          // let fun = (event) => {
          //   if (event.target.parentElement.parentElement.id !== 'ownerSelect') {
          //     document.body.removeEventListener('click', fun)
          //   }
          // }
          // document.body.addEventListener('click', fun, { once: true })
        }
      },
      setOwner (command) {
        this.loading = true
        let category = command.split('|')[0]
        let categoryId = command.split('|')[1]
        let owner = command.split('|')[2]
        this.imgUrl = showFieldDesc('imgUrl', owner)
        let data = {
          _id: this.customer._id,
          category,
          categoryId,
          owner
        }
        this.$store.dispatch('updateCustomerOwner', data).then(() => {
          this.loading = false
        })
      },
      closeDialog (value) {
        this.customerInfo.isdealog = value
      }
    },
    beforeMount () {
      if (isHasFunc('func_sort_phone_bar_send_sms', this.$store.state.session.user)) {
        this.isSMS = false
      }
      let user = this.$store.state.session.user
      if (user.uversion && user.uversion === 'monitor') {
        this.isMonitorVersion = true
      }
      let exten_visible = this.$store.state.session.account.exten_visible || []
      if (exten_visible.includes(this.$store.state.session.sessionId)) {
        this.showRemoteControl = true
      }
      this.fetchData()
    }
  }
</script>
<style lang="stylus" scoped>
@import '../../../assets/common.styl'
.un-remark-warp
  display flex
  flex-wrap wrap
  clear both
  .cust-main
    flex 1
    padding-bottom 4px
    width 100%
.customer-slot
  padding-top 15px
  box-sizing border-box
  line-height 12px
  height 81px
  .cust-type
    display inline-block
    /*padding-top 23px*/
    margin-right 12px
  .c_info
    display inline-block
    margin-bottom 4px
    width calc(100% - 500px)
    .name
      margin-bottom 10px
      display flex
      color $cf-level3
      align-items center
      white-space nowrap
      h3
        font-size 18px
        text-overflow ellipsis
        overflow hidden
        white-space nowrap
        font-weight bold
        display inline-block
        color $cf-gray2
    .business-del-name
      display block
      h3
        line-height 56px
  .contact
    float right
    box-sizing border-box
    display flex
    align-items center
    .agent-name
      display flex
      align-items center
      /*font-weight 300*/
      .agent-name__span
        display inline-block
        max-width 6em
        margin-right 5px
        color $cf-gray4
        text-overflow ellipsis
        overflow hidden
        white-space nowrap
      .agent-name__i
        display inline-block
    /*.source
      display inline
      width 105px
      margin-left 10px*/
    .icon
      display inline-block
      border 1px solid  $c-main
      width 30px
      height 30px
      line-height 30px
      border-radius 19px
      cursor pointer
      /*.iconfont
        font-size 18px*/
      /*margin-left 4px*/
      .icon__i
        margin-left 7px
  .agent
  .info
    display inline-block
    box-size(30px)
    border-radius 50%
    margin-right 10px
    float right
    overflow hidden
    img
      box-size(30px)
      border-radius 50%
  .info
    cursor pointer
    border 1px solid  $c-main
    .icon-dianhua
      line-height 30px
  .disable
    border 1px solid  #d3d3d3
.iconfont
  font-size 16px
  color $c-main
.remark
  max-height 30px
  font-size 12px
  color $cf-gray2
  line-height 20px
  white-space nowrap
  overflow hidden
  text-overflow ellipsis
  cursor pointer
.webchat_customer
  display flex
  /*margin-top 4px*/
  .el-form-item
    flex 1
    margin 0 0 0 10px
    &:first-child
      margin-left 0
  .search_span
    display inline-block
    width 24px
    height 23px
    line-height 23px
    text-align center
    background $c-main
    margin 5px 0 0 4px
    border-radius 3px
    cursor pointer
    i
      font-size 16px
      color $cf-white
.exist_custom
  line-height 24px
  span
    width auto
.exist_custom_webchat
  line-height 14px
  color $cf-gray2
.phone-wrap
  color $cf-level2
.innerwrap-new
  display flex
  align-items center
  min-height 60px
  max-height 88px
  .c-webchat__wapper
    flex 1
  .cust-type
    margin-right 15px
    padding-top 2px
  .c_info
    display flex
    align-items center
    margin-bottom 0
    .name
      margin-bottom 0
    .status
      .text
        margin-left 8px
        display inline-block
        height 19px
        width 19px
        border 1px solid $c-main
        border-radius 50%
        text-align center
        float left
        i
          font-size 12px
          margin 0 auto
          line-height 19px
// 用于未知客户内容居中  出在线咨询外
  .c-info__wapper
    margin-top -4px
  .innerwrap-new__webchat
    .cust-type
      margin-top -30px
.status
  font-weight 400
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  .el-dropdown
    padding-right 20px
  a
    color $c-main
    i
      margin-right 4px
  .selec
    margin-left 16px
  .type
    display inline-block
    line-height 13px
    cursor pointer
    color $cf-gray4
  .type-dailog
    display inline-block
    max-width 6em
    text-overflow ellipsis
    overflow hidden
    white-space nowrap
</style>
